<template>
    <div class="person">
        <h2>名字:{{ name }}</h2>
        <h2>年龄:{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTow">查看手机号</button>
    <hr>
    <h2>测试:{{ a }}</h2>
    <h2>测试:{{ c }}</h2>
    <h2>测试:{{ d }}</h2>
    <button @click="b">测试</button>
    </div>
</template>

<script>
/* 
    vue2中的data数据可以读取vue3中的setup中的数据 反过来就不行了
*/
    export default {
        name:'Person',
        data(){
            return {
                a:100,
                c:this.name,
                d:900
                
            }
        },
        methods:{
            b(){
                console.log('b')
            }
        },
        setup(){
            console.log(this)// setup里面的this是undefined vue3中已经弱化this了
            // 数据
            let name = '张三' // 注意此时的name不是响应式的
            let age = 18 // 注意此时的age不是响应式的
            let tel = '13800000000' // 注意此时的tel不是响应式的
            // 方法
            function changeName(){
                name = 'zhang-san'// 这样修改的name页面没有修改
                console.log(name)// 数据确实修改了但页面没有修改
            }
            function changeAge(){
                age+=1
            }
            function showTow(){
                alert(tel)
            }
            return {
                name,
                age,
                changeName,
                changeAge,
                showTow
            }
            
        }
    }
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>